<template>
	<view class="container">
		<view class="top-container">
			<!-- 轮播背景 -->
			<swiper class="swiper" circular indicator-dots indicator-color="#ffffff">
				<swiper-item v-for="(item, index) in seele.page_shop_home.banner" :key="index">
					<image :src="$wanlshop.oss(item)" mode="aspectFill" class="swiper-image" />
				</swiper-item>
			</swiper>

			<!-- 浮层内容 -->
			<view class="overlay">
				<!-- 第一行 -->
				<view class="first-row">
					<view class="location">
						<!-- <text>{{seele.page_shop_home.city}}</text> -->
						<text @click="dtclick">{{dt}}</text>
						<uni-icons type="down" color="#ffffff" size="12"></uni-icons>
					</view>
					<view class="search-box">
						<uni-icons type="search" class="search-icon"></uni-icons>
						<input placeholder="请输入搜索内容" class="search-input" />
						<text>|</text>
						<button class="search-btn" :hover-class="null">搜索</button>
					</view>
				</view>

				<!-- 第二行 -->
				<view class="second-row">
					<view @click="turn_to(item)" v-for="(item, index) in iconList" :key="index" class="icon-item">
						<image :src="item.icon" class="function-icon" />
						<text class="icon-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

			<view class="bottom-actions">
				<view @click="turn_to(item)" v-for="(item, index) in bottomIcons" :key="index" class="action-item">
					<image :src="item.icon" :class="[index!=2?'action-icon':'action-icon-lg']" mode="aspectFill" />
					<text class="action-text" v-if="index !=2">{{ item.text }}</text>
				</view>
			</view>
		</view>

		<view class="other-actions">
			<view @click="turn_to(item)" v-for="(item, index) in otherIcons" :key="index" class="other-item">
				<image :src="item.icon" class="other-icon" mode="aspectFill" />
				<text class="action-text">{{ item.text }}</text>
			</view>
		</view>

		<view class="ad-container" @click="$wanlshop.to('/pages/apps/find/details/video')">
			<image :src="$wanlshop.oss(seele.page_conf.adv_img_2)"></image>
		</view>

		<view class="section-f">
			<image class="ad-img" :src="$wanlshop.oss(seele.page_conf.adv_img_3)" mode="aspectFill"></image>
		</view>

		<!-- 底部关注栏 -->
		<view v-if="showBanner" class="bottom-banner">
			<view class="banner-content">
				<!-- 左侧内容 -->
				<view class="left-section">
					<image src="/static/images/notice-icon.png" class="banner-icon" />
					<view class="text-container">
						<text class="title">关注都市天菲</text>
						<text class="subtitle">欢迎入驻都市天菲小程序，实现线上线下团购</text>
					</view>
				</view>

				<!-- 右侧操作区 -->
				<view class="right-section">
					<button class="follow-btn">立即关注</button>
					<view class="close-btn" @tap="closeBanner">×</view>
				</view>
			</view>
		</view>


		<view v-if="showPoster" class="popup-mask" @click="showPoster=false">
			<view class="popup-content" @click.stop>
				<image :src="$wanlshop.oss(seele.page_conf.wx_qr_code)" mode="aspectFit" class="popup-image"></image>
				<text class="popup-text">长按识别二维码关注公众号</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		props: ['shop_id'],
		computed: {
			...mapState(['seele'])
		},
		data() {
			return {
				dt: '请选择',
				showPoster: false,
				showBanner: true,
				swiperList: [
					'/static/mbanner1.png',
					'/static/mbanner1.png',
					'/static/mbanner1.png'
				],
				iconList: [{
						icon: '/static/images/scan.png',
						text: '扫一扫',
						// func: 'scan',
						path:'#'
					},
					{
						icon: '/static/images/trade.png',
						text: '交易中心',
						// path: '/pages/user/order/order'
						// path:'/pages/user/order/order'
						path: '#'
					},
					{
						icon: '/static/images/video.png',
						text: '我的视频',
						// path:"/pages/apps/find/details/video",
						path: "#"
					},
					{
						icon: '/static/images/follow.png',
						text: '已关注',
						// path: '/pages/user/follow'
						path: "#"
					}
				],
				// 新增数据项
				bottomIcons: [{
						icon: '/static/images/nearby.png',
						text: '附近畅链',
						// path: "/pages/dispatch/shop/wifiPage?shop_id="
						// path:"/pages/dispatch/shop/wifiPage?shop_id="
						path: "#"
					},
					{
						icon: '/static/images/checkin.png',
						text: '入住平台',
						path: "/pages/new/settled/settled"
						// path: "#"
					},
					{
						icon: '/static/images/official.png',
						text: '公众号',
						// func: 'increase_home_show_poster_flag'
						path: "#"
					},
					{
						icon: '/static/images/mall.png',
						text: '天菲商城',
						// path:"/pages/index"
						path: "#"
					},
					{
						icon: '/static/images/ticket.png',
						text: '门票中心',
						// path:"/pages/dispatch/shop/voucherPage"
						// path: "/pages/user/coupon/list"
						path: "#"
					}
				],
				otherIcons: [{
						icon: '/static/images/n1.png',
						text: '附近商家',
						path: "/pages/dispatch/shop/near?filter=all"
					},
					{
						icon: '/static/images/c1.png',
						text: '旅游团购',
						// path: "/pages/dispatch/shop/near?filter=TRAVEL,GROUP"
						path: "#"
					},
					{
						icon: '/static/images/o1.png',
						text: '火速派单',
						// path: '/pages/dispatch/releaseIndex/releaseIndex',
						path: "#"
					},
					{
						icon: '/static/images/m1.png',
						text: '商家有券',
						// path: '/pages/user/coupon/list'
						path: "#"
					},
					{
						icon: '/static/images/t1.png',
						text: '淘票票',
						// func: 'turn_to_taopiapiap'
						path: "#"
					}
				],
				// 指示点样式配置
				indicatorStyle: "bottom: 120rpx;"
			}
		},
		watch: {
			// 监听 count 的变化
			'seele.home_show_poster_flag': function(newVal, oldVal) {
				console.log('seele 发生变化:', newVal, oldVal);
				// this.$refs.popup.open()
				// this.showToast(`seele 从 ${oldVal} 变为 ${newVal}`);
				this.showPoster = true;
			}
		},
		created() {
			setTimeout(() => {
				this.init()

			}, 5000);
			setTimeout(() => {
				this.dtclick()
			}, 2000);
		},
		methods: {
			closeBanner() {
				this.showBanner = false
			},
			turn_to(item) {
				this.$store.dispatch('seele/home_top_opt', {
					item: item,
					shop_id: this.shop_id
				});
			},
			dtclick() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						let longitude = res.longitude; // 经度
						let latitude = res.latitude; // 纬度

						// 高德地图逆地理编码API的URL
						let apiKey = '41ed00c06016a4c19834abf849829137';
						let url =
							`https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${longitude},${latitude}`;

						// 发起请求
						uni.request({
							url: url,
							success: (res) => {
								if (res.statusCode === 200) {
									let data = res.data;
									if (data.status === '1') {
										let address = data.regeocode.formatted_address; // 获取格式化地址
										console.log('当前位置的地址：', address);
										that.dt = address

									} else {
										console.error('逆地理编码失败：', data.info);
									}
								} else {
									console.error('请求失败：', res.statusCode);
								}
							},
							fail: (err) => {
								console.error('请求失败：', err);
							}
						});




					}
				});

				// 假设你已经获取到了经纬度










			},


			init() {
				uni.request({
					url: '/wanlshop/coupon/getList', //仅为示例，并非真实接口地址。
					data: {
						type: 1,
						page: 1
					},
					success: (res) => {
						console.log(res);
					},
					fail: (erro) => {
						console.log(erro)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	.top-container {
		position: relative;
		height: 695rpx;
		// background: url("@/static/mbanner1.png") center center no-repeat;
		background-size: 100% 100%;
	}

	.swiper {
		height: 696rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.overlay {
		position: absolute;
		top: 35rpx;
		left: 0;
		width: 100%;
		padding: calc(10rpx + var(--status-bar-height)) 20rpx 20rpx 20rpx;
		box-sizing: border-box;
	}



	.first-row {
		display: flex;
		justify-content: start;
		align-items: center;
		margin-bottom: 40rpx;
		margin-right: 40rpx;
	}

	.location {
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 24rpx;
		width: 110rpx;

		text {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	.search-box {
		flex: 1;
		max-width: 400rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		text {
			font-size: 28rpx;
			color: #333;
		}
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		background: transparent;
		font-size: 28rpx;
		padding: 0;
		margin-left: 20rpx;
		line-height: 1;
	}

	.second-row {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.icon-text {
		color: #ffffff;
		font-size: 12px;
		text-align: center;
	}

	.bottom-actions {
		position: absolute;
		width: 100vw;
		height: 136rpx;
		background: rgba(255, 255, 255, 0.5);
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(10px);
		bottom: 8rpx;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.action-icon {
		width: 81rpx;
		height: 45rpx;
		margin-bottom: 8rpx;
	}

	.action-icon-lg {
		width: 113rpx;
		height: 113rpx;
	}

	.action-text {
		font-size: 20rpx;
		white-space: nowrap;
	}

	.other-actions {
		width: 100vw;
		height: 165rpx;
		background: rgba(255, 255, 255, 0.8);
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(10px);
		bottom: 8rpx;
	}

	.other-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.other-icon {
		width: 63rpx;
		height: 57rpx;
		margin-bottom: 8rpx;
	}

	.ad-container {
		width: 100vw;
		height: 100rpx;

		image {
			width: 100vw;
			height: 123rpx;
		}
	}

	.section-f {
		margin: 40rpx 29rpx 29rpx 29rpx;
		border-radius: 30rpx;

		.ad-img {
			border-radius: 30rpx;
			width: 696rpx;
			height: 520rpx;
		}
	}

	.bottom-banner {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(92, 92, 92, 0.95);
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		z-index: 999;
	}

	.banner-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.left-section {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 30rpx;
	}

	.banner-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
	}

	.text-container {
		display: flex;
		flex-direction: column;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: #ffffff;
		margin-bottom: 8rpx;
	}

	.subtitle {
		font-size: 22rpx;
		color: #ffffff;
	}

	.right-section {
		display: flex;
		align-items: center;
	}

	.follow-btn {
		background: #E64340;
		color: white;
		font-size: 24rpx;
		padding: 8rpx 25rpx;
		border-radius: 30rpx;
		margin-right: 30rpx;
		line-height: 1.5;
	}

	.close-btn {
		font-size: 40rpx;
		color: #999;
		width: 40rpx;
		height: 40rpx;
		line-height: 36rpx;
		text-align: center;
	}
</style>


<style scoped>
	/* 全屏遮罩 */
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	/* 弹窗内容 */
	.popup-content {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		width: 80%;
		max-width: 300px;
		text-align: center;
	}

	/* 图片样式 */
	.popup-image {
		width: 100%;
		height: 150px;
		margin-bottom: 15px;
	}

	/* 文字样式 */
	.popup-text {
		font-size: 16px;
		color: #333;
		margin-bottom: 15px;
	}

	/* 按钮样式 */
	.popup-button {
		background-color: #007aff;
		color: #fff;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 14px;
	}
</style>